<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}"/>
</head>
<body style="padding:8px;">
<h3 class="title">课程管理</h3>
<form action="" method="POST">
    <input type="hidden" name="_method" value="DELETE"/>
</form>
<div id="queryArea">
    <form id="selCourse" th:action="@{/course/list_course}" method="post" th:object="${helper}">
        课程名称：<input type="text" name="courseName"/>&nbsp;&nbsp;
        学分范围：<input type="text" name="credit1" size="6"/> - <input type="text" name="credit2" size="6"/>&nbsp;&nbsp;
        课程类型：
        <select name="courseTypeId">
            <option value="">=请选择=</option>
            <option th:each="list:${courseTypeList}" th:value="${list.id}" th:text="${list.name}"></option>
        </select>
        <input type="submit" value="查询"/>
    </form>
</div>

<table border="0" cellspacing="0">
    <tr>
        <th>序号</th>
        <th>编号</th>
        <th>名称</th>
        <th>课时</th>
        <th>学分</th>
        <th>类型</th>
        <th>状态</th>
        <th>选课要求</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    <tr th:each="course,iterStat : ${page.list}" stat>
        <td th:text="${iterStat.index+1}" nowrap></td><!--序号-->
        <td th:text="${course.no}" nowrap></td>
        <td nowrap style="padding-top:10px;">
            [[${course.name}]]<br>
            <!--            [[${course.textbookPic}]]-->
            <!--            <input type="image" width="100" height="50" th:value="${course.textbookPic}">-->
            <img width="100" height="50" th:alt="${course.name+'的教材'}"
                 th:src="@{/course/getPic/{courseNo}(courseNo=${course.no})}"/>
        </td>
        <td th:text="${course.hours}" nowrap></td>
        <td th:text="${course.point}" nowrap></td>
        <td th:text="${courseTypeMap[course.typeId].name}" nowrap></td><!--courseType.typeName-->
        <td nowrap>
            <span th:if="${course.status eq '0'}">开放公选</span>
            <span th:if="${course.status eq '1'}">暂不开放</span>
            <span th:if="${course.status eq '2'}">停止授课</span>
        </td>
        <td nowrap>
            <span th:each="req : ${#strings.listSplit(course.reqs,'|')}">
                <font th:if="${req eq '0'}">大三以上</font>
                <font th:if="${req eq '1'}">平均成绩80分</font>
                <font th:if="${req eq '2'}">非本专业学生</font>
                <font th:if="${req eq '3'}">未拖欠学费</font>
            </span>
        </td>
        <td th:text="${course.memo}" nowrap></td>
        <td>
            <button class="update" th:href="@{/course/preUpdate/{courseNo}(courseNo=${course.no})}">修改</button>
            <button class="delete" th:href="@{/course/remove/{courseNo}(courseNo=${course.no})}">删除</button>
        </td>
    </tr>
</table>
<div id="pageInfo">
    共[[${page.total}]]条,
    <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 == page.total }">
			当前显示第[[${page.total}]]条,
	</span>
    <span th:if="${ ( page.pageNum - 1 ) * page.pageSize + 1 != page.total }">
			当前显示[[${page.startRow}]]-[[${page.endRow}]]条,
	</span>
    第[[${page.pageNum}]]/[[${page.pages}]]页
    |
    <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" th:sheet="1" id="one">首页</span>&nbsp;</a>
    <a href="#" th:if="${page.pageNum > 1}"><span class="linkspan" th:sheet="${page.prePage}" id="two">上一页</span>&nbsp;</a>
    <a href="#" th:if="${page.pageNum < page.pages}"><span class="linkspan" th:sheet="${page.nextPage}"
                                                           id="three">下一页</span>&nbsp;</a>
    <a href="#" th:if="${page.pageNum != page.pages}"><span class="linkspan" th:sheet="${page.pages}"
                                                            id="four">末页</span>&nbsp;</a>
    |
    到<input type="text" id="pageNo" size=4 style="text-align:right;" onkeypress="onlynumber();"/> 页
    <button id="five" style="color:black;text-decoration:none;"> 跳 转</button>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.1.1.min.js}"></script>
<script th:inline="javascript">
    $(function () {
        //删除操作
        $(".delete").click(function () {
            var href = $(this).attr("href");
            if (confirm("确定要删除吗?")) {
                $("form:eq(0)").attr("action", href).submit();
                return false;
            }

        });

        $(".update").click(function () {
            var href = $(this).attr("href");
            $(location).attr("href", href);
        });

        //分页操作
        // $(".linkspan").click(function () {
        //
        //     var pageNo = [[${page.pageNum}]];
        //     var totalPageNum = [[${page.pages}]];
        //     var re = /^[0-9]+.?[0-9]*$/;
        //
        //     if (String($(this).attr("id")) == String("one"))
        //         pageNo = 1;
        //
        //     if (String($(this).attr("id")) == String("two"))
        //         pageNo = pageNo - 1;
        //
        //     if (String($(this).attr("id")) == String("three"))
        //         pageNo = pageNo + 1;
        //
        //     if (String($(this).attr("id")) == String("four"))
        //         pageNo = totalPageNum;
        //
        //     if (String($(this).attr("id")) == String("five")) {
        //         var num = $.trim($("#pageNo").val());
        //
        //         if (!re.test(num)) {
        //             alert("输入的不是数字!");
        //             return;
        //         }
        //         pageNo = parseInt(num);
        //         if (pageNo < 1 || pageNo > totalPageNum) {
        //             alert("页号超出范围，有效范围：[1-" + totalPageNum + "]!");
        //             return;
        //         }
        //
        //     }
        //
        //     // var act="?pageNo="+pageNo;
        //     // $("form:eq(1)").attr("action",act).submit();
        //     // return false;
        //
        // });

        // $("#selCourse").submit(function () {
        //     var myaction=$(this).attr("action");
        //     $(this).attr("action",myaction+"?pageNum="+$("#pageNo").val());
        //     alert($(this).attr("action"));
        //     return true;
        // })

        $(".linkspan").click(function () {
            var pageNum = $(this).attr("sheet");
            var myaction = $("#selCourse").attr("action");
            $("#selCourse").attr("action", myaction + "?pageNum=" + pageNum);
            $("#selCourse").submit();
        });
        $("#five").click(function () {
            var pageNo = $("#pageNo");
            if (!isNaN(pageNo.val())) {
                // alert(pageNo.val()+"||"+"[[${page.pageNum}]]");
                if (pageNo.val() == "[[${page.pageNum}]]") {
                    alert("当前就是这页");
                } else if (pageNo.val() >= 1 && pageNo.val() <= "[[${page.pages}]]") {
                    var myaction = $("#selCourse").attr("action");
                    $("#selCourse").attr("action", myaction + "?pageNum=" + $("#pageNo").val());
                    $("#selCourse").submit();
                } else {
                    alert("输入的页数超出范围");
                }
            } else {
                alert("请输入数值类型");
            }
        });

        // alert("[[page.list[0].textbookPic]]");
    });

</script>
</body>
</html>